<template>
  <div>
    <div class="page">
      <Menu class="left-menu" />
      <div class="page-content">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane v-for="item in tabList" :label="item.label" :name="item.name">
            <div v-show="activeName === 'page'">
              <router-view></router-view>
            </div>
            <div v-show="activeName === 'code'">
              <SourceCode />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Menu } from '@com/Navigation/index';
import SourceCode from '@com/SourceCode/index.vue';

const activeName = ref('page');

const tabList = ref([
  {
    label: '页面展示',
    name: 'page',
  },
  {
    label: '查看源代码',
    name: 'code',
  },
]);
</script>
<style lang="scss" scoped>
.page {
  display: flex;
  .page-content {
    width: calc(100% - 230px);
    padding: 20px 10px;
  }
  .left-menu {
    padding-top: 20px;
  }
}
</style>
